import React from 'react';
import { Link } from 'react-router-dom';
import { observer, inject } from 'mobx-react';


import ImageLoader from '../../styles/ImageLoader'

import 'fabric';

import $ from 'zepto';

import { Icon, message, Button, Modal } from 'antd';

import { PageEventType } from '../../utils/PageEventType'

import './index.scss'

import WinHelper from '@src/utils/WinHelper'
import Item from 'antd/lib/list/Item';



@inject('showStore')
@inject('baseStore')
@observer
class ShowPage extends React.Component {

	constructor(props) {
		super(props);
		this.state = {
			show_free_dialog: false, //自由临摹层
			tenCmNeedZoom: 1,
			visible: true,
			side_show: true,
			moveCanvas: false,
			canvas_orign: {
				width: 1210,
				height: 610
			},
			show_img: false,
			show_img_url: '',
			show_video: false,
			show_video_url: '',
			bgImgList: [{
				Name: '米字格',
				Icon: 'mi_icon',
				ImgUrl: this.props.baseStore.appPreUrl + '/pic/canvas_bg/米_1200x600.png',
				Width: 1200,
				Height: 600
			}, {
				Name: '田字格',
				Icon: 'tian_icon',
				ImgUrl: this.props.baseStore.appPreUrl + '/pic/canvas_bg/田_1200x600.png',
				Width: 1200,
				Height: 600
			}],
			bgImgActivedIndex: 0,
			canvasMyMod: 0, // 左侧进入模式   0.展示模式  1.单点击编辑  2.拖放
			curRightActivedItem: null,  //右侧当前激活  用于单击编辑框

			freeBgUrl: this.props.baseStore.appPreUrl + '/pic/canvas_bg/米_1200x600.png',
			freeActiveItem: null,
			freeActiveItemMap: {

			},
			video_type: 0, // 0 保利  1 普通视频
			night: false,//夜间
			activeRightListIndex: 0,
			each_w: 378,
			each_w_mm: 100, //100毫米
			maskLock: false
		};

		this._canvas = null;
		this.container = null;

	}

	renderImgArr = (arr, canvas) => {

		this.canvasClear();

		var toAddImg = [];

		arr.forEach((item, index) => {

			if (item != null) {
				fabric.Image.fromURL(this.props.baseStore.GetFinalImageUrl(item.ImageURL), function (oImg) {

					console.log(oImg, "========oImg=======");

					oImg.width = oImg._element.width;
					oImg.height = oImg._element.height;

					oImg.top = (Math.floor(index / 4)) * 300;
					oImg.left = (index % 4) * 300;

					console.log(`${index}:${oImg.top}_${oImg.left}`);

					oImg.preserveObjectStacking = true;

					oImg.scaleX = 300 / oImg.width;
					oImg.scaleY = 300 / oImg.height;

					oImg.crossOrigin = 'anonymous';

					oImg.selectable = false;

					canvas.add(oImg);
					toAddImg.push(oImg);
				});
			}


		})

		this._canvas.discardActiveObject();

		// var group = new fabric.Group(toAddImg, {
		// 	left: 0,
		// 	top: 0
		// });
		// canvas.add(group);

	}


	componentDidMount() {

		// 计算出如果调成安世高10cm的绽放比例
		var my_px = WinHelper.mmToPx(100);
		my_px = Math.round(my_px);
		console.log(my_px, "=======my_px=======");
		var tenCmNeedZoom = my_px / 300;
		this.setState({
			tenCmNeedZoom: tenCmNeedZoom
		})

		this.props.baseStore.topHeader.show = true;
		//因此页入口可能有多个 所以 backTo在来源页就设置好


		var directoryId = this.props.match.params.directoryId || '';


		var data = {
			header: this.props.baseStore.socketData.header,
			body: {
				type: "page_change",
				content: `/showCourse/${directoryId}`
			}
		};

		//给服务端发送 sendMsg事件名的消息
		this.props.baseStore.socketData.socket.emit("teach_app_to_server", data);
		this.props.baseStore.socketData.currentReactView = this;



		if (directoryId.length == 0) {
			// alert("即查即练")
		} else {
			this.props.showStore.GetWordListById(directoryId);
		}

		var canvas = this._canvas;
		var moveCanvas = this.moveCanvas;

		this._canvas = new fabric.Canvas('canvas', {
			isDrawingMode: false,
			width: 1200,
			height: 600,
			selections: false
			// backgroundColor: '#D6F8FF'
		});
		this._canvas.selection = false;
		this._canvas.preserveObjectStacking = false;
		//this._canvas.setBackgroundImage(this.props.baseStore.appPreUrl+'/pic/1210x610.png', this._canvas.renderAll.bind(this._canvas));


		var curBgImgObj = this.state.bgImgList[this.state.bgImgActivedIndex];
		$(this._canvas.wrapperEl).css({
			// backgroundImage: "urlthis.props.baseStore.appPreUrl+(/pic/1210x610.png)"
			backgroundImage: `url(${curBgImgObj.ImgUrl})`

		});

		var that = this;

		var start_pos = {
			x: 0,
			y: 0
		};

		var $canvas_container = $(".canvas-container");


		this.container = {
			width: 1920, //侧边
			height: 1080
		}

		var container = this.container;


		$(".canvas-container").css({
			left: container.width / 2 - this.getDomRealData($canvas_container).css_width / 2,
			top: container.height / 2 - this.getDomRealData($canvas_container).css_height / 2
		});

		var container_pos = {
			x: $('.canvas-container').position().left,
			y: $('.canvas-container').position().top
		}


		var that = this;

		document.querySelector(".canvas_can_drag").addEventListener('click', function () {


			var mask = `<div class="canvas_mask"></div>`;

			if ($('.canvas_mask').length == 0) {
				$(".canvas-container").append($(mask));
			} else {
				$('.canvas_mask').remove();
				return;
			}


			$('.canvas_mask').unbind().bind(PageEventType.moveEvent, function (evt) {

				if (moveCanvas) {


					var evt_pageX = evt.pageX || evt.touches[0].pageX;
					var evt_pageY = evt.pageY || evt.touches[0].pageY;

					// $(".canvas-container").css({
					// 	left: container_pos.x / window.scaleX + (evt_pageX - start_pos.x),
					// 	top: container_pos.y / window.scaleY + (evt_pageY - start_pos.y),
					// 	transform: "none"
					// });

					that.setCanvasContainerCss(container_pos, (evt_pageX - start_pos.x), (evt_pageY - start_pos.y))



				}
			}).bind(PageEventType.startEvent, function (evt) {

				console.log(evt, "===========mousedown.evt=============");

				moveCanvas = true;

				var evt_pageX = evt.pageX || evt.touches[0].pageX;
				var evt_pageY = evt.pageY || evt.touches[0].pageY;

				start_pos = {
					x: evt_pageX,
					y: evt_pageY
				}

				container_pos = {
					x: $(".canvas-container").position().left,
					y: $(".canvas-container").position().top
				}


			}).bind(PageEventType.endEvent, function (evt) {
				moveCanvas = false;
				$('.canvas_mask').remove();
			}).bind(PageEventType.cancelEvent, function (evt) {
				moveCanvas = false;
				$('.canvas_mask').remove();
			});

			$(window).on(PageEventType.endEvent, function (e) {
				moveCanvas = false;
				$('.canvas_mask').remove();
			})


			that.side_show(false)

		});

		// document.querySelector(".canvas_can_drag").click();

		$('.ShowPage_Main')[0].addEventListener('mousewheel', function (e) {
			var direction = e.deltaY > 0 ? 'down' : 'up'
			var num = direction == "up" ? 0.1 : -0.1
			that.canvasZoom(num);
		})

		//默认单元格给10cm宽高
		that.canvasZoomDirect(tenCmNeedZoom)

		setTimeout(() => {
			that.side_show(true)

			that.singleContainClick();

		}, 600);


		this.bindPadKey();


	}

	side_show = (to) => {
		this.setState({
			side_show: to
		})

		var data = {
			header: this.props.baseStore.socketData.header,
			body: {
				type: "do_action",
				content: {
					action: 'side_show',
					param: [to]
				}
			}
		};
		this.props.baseStore.socketData.doEmit("teach_app_to_server", data);

	}

	setCanvasContainerCss = (container_pos, changeX, changeY) => {


		var data = {
			header: this.props.baseStore.socketData.header,
			body: {
				type: "do_action",
				content: {
					action: 'setCanvasContainerCss',
					param: [container_pos, changeX, changeY]
				}
			}
		};
		this.props.baseStore.socketData.doEmit("teach_app_to_server", data);

		$(".canvas-container").css({
			left: container_pos.x / window.scaleX + changeX,
			top: container_pos.y / window.scaleY + changeY,
			transform: "none"
		});



	}

	componentWillUnmount = () => {
		this.setState = (state, callback) => {
			return;
		};
	}

	bindPadKey = () => {
		var that = this;
		//向上
		window.listenerNativeCode('19', function (code) {
			that.moveCanvasHandler(1);
		})

		//向下
		window.listenerNativeCode('20', function (code) {
			that.moveCanvasHandler(3);
		})

		//向左
		window.listenerNativeCode('21', function (code) {
			that.moveCanvasHandler(4);
		})

		//向右
		window.listenerNativeCode('22', function (code) {
			that.moveCanvasHandler(2);
		})



		//放大
		window.listenerNativeCode('24', function (code) {
			that.zoomToForPhysicalButton(1);
		})

		//缩小
		window.listenerNativeCode('25', function (code) {
			that.zoomToForPhysicalButton(-1);
		})
	}


	//左侧显示与隐藏切换
	handleToggleSideClick = () => {

		var data = {
			header: this.props.baseStore.socketData.header,
			body: {
				type: "do_action",
				content: {
					action: 'handleToggleSideClick',
					param: []
				}
			}
		};
		this.props.baseStore.socketData.doEmit("teach_app_to_server", data);


		var to = !this.state.side_show;
		var lock = false;
		if (to) {
			lock = false;
		} else {
			//lock = true;
		}
		this.setState({
			side_show: to,
			maskLock: lock
		})
	}


	//通过样式取宽高
	getDomRealData = (selector) => {
		var param = {
			css_width: parseFloat($(selector).css('width').replace('px', '')),
			css_height: parseFloat($(selector).css('height').replace('px', ''))
		};
		return param;
	}

	componentDidUpdate() {

		//重新画
	}

	//绽放
	canvasZoom(num) {
		var zoom = this._canvas.getZoom();
		zoom += num;
		message.config({
			top: 100,
			duration: 1,
			maxCount: 1,
		});
		if (zoom > 2 || zoom < 0.5) {
			message.warning('超出最大或最小缩比例！');
			return;
		}
		this.canvasZoomDirect(zoom);

	}

	//直接缩放至
	canvasZoomDirect(zoom) {
		this._canvas.setWidth(this.state.canvas_orign.width * zoom);
		this._canvas.setHeight(this.state.canvas_orign.height * zoom);
		this._canvas.setZoom(zoom);
		this.setCanvaWrapPosition();
	}

	//居中
	setCanvaWrapPosition() {

		var data = this.getDomRealData('.ShowPage_Main');

		$(this._canvas.wrapperEl).css({
			top: data.css_height / 2 + 'px',
			left: data.css_width / 2 + 'px',
			transform: "translate(-50%,-50%)"
		})
	}

	//放大
	canvasZoomIn = () => {
		this.canvasZoom(0.05)
	}

	//缩小
	canvasZoomOut = () => {
		this.canvasZoom(-0.05)
	}

	//清空画布
	canvasClear = () => {
		this._canvas.clear();


		var data = {
			header: this.props.baseStore.socketData.header,
			body: {
				type: "do_action",
				content: {
					action: 'canvasClear',
					param: []
				}
			}
		};
		this.props.baseStore.socketData.doEmit("teach_app_to_server", data);

	}

	//切换画布背景
	canvasChangeBg = () => {


		var data = {
			header: this.props.baseStore.socketData.header,
			body: {
				type: "do_action",
				content: {
					action: 'canvasChangeBg',
					param: []
				}
			}
		};
		this.props.baseStore.socketData.doEmit("teach_app_to_server", data);

		var curBgImgIndex = this.state.bgImgActivedIndex;
		if (curBgImgIndex < this.state.bgImgList.length - 1) {
			this.setState({
				bgImgActivedIndex: curBgImgIndex + 1
			})
			curBgImgIndex = curBgImgIndex + 1;
		} else {
			this.setState({
				bgImgActivedIndex: 0
			})
			curBgImgIndex = 0
		}

		var curBgImgObj = this.state.bgImgList[curBgImgIndex];
		$(this._canvas.wrapperEl).css({
			backgroundImage: `url(${curBgImgObj.ImgUrl})`
		});
	}

	canvasChangeBgDirect(bg_url) {
		$(this._canvas.wrapperEl).css({
			backgroundImage: `url(${bg_url})`
		});
	}

	//左侧单击
	singleContainClick = (item, index) => {

		var data = {
			header: this.props.baseStore.socketData.header,
			body: {
				type: "do_action",
				content: {
					action: 'singleContainClick',
					param: [item, index]
				}
			}
		};

		this.props.baseStore.socketData.doEmit("teach_app_to_server", data);



		var that = this;
		console.log(item);

		item = item || this.props.showStore.rightList[0];

		this.props.showStore.SetCurrentWordItem(item);

		//展示模板
		if (this.state.canvasMyMod == 0) {

			var that = this;

			this.setState({
				activeRightListIndex: index || 0
			})

			setTimeout(() => {
				var imgArr = [];
				if (that.props.showStore.currentWordImgList) {
					imgArr = that.props.showStore.currentWordImgList.map(item => {
						item.ImageURL = this.props.baseStore.GetFinalImageUrl(item.ImageURL);
						return item;
					})
				}
				if (imgArr.length > 0) {
					that.renderImgArr(imgArr, that._canvas);

				}
			}, 100);
		}
	}

	//显示视频
	showVideo = (e, item) => {
		e && e.stopPropagation();

		var data = {
			header: this.props.baseStore.socketData.header,
			body: {
				type: "do_action",
				content: {
					action: 'showVideo',
					param: [undefined, item]
				}
			}
		};

		this.props.baseStore.socketData.doEmit("teach_app_to_server", data);



		//保利
		if (item.indexOf('/') == -1) {

			this.setState({
				show_video: true,
				show_video_url: item,
				video_type: 0
			});
			return;
		}

		//非保利
		if (item.indexOf('http') == -1) {
			item = this.props.baseStore.picPreUrl + item;
		}
		this.setState({
			show_video: true,
			show_video_url: item,
			video_type: 1
		})


	}

	//关闭视频
	closeVideo = () => {

		var data = {
			header: this.props.baseStore.socketData.header,
			body: {
				type: "do_action",
				content: {
					action: 'closeVideo',
					param: []
				}
			}
		};

		this.props.baseStore.socketData.doEmit("teach_app_to_server", data);

		this.setState({ show_video: false })
	}

	toggleFreeDialog = () => {

		var data = {
			header: this.props.baseStore.socketData.header,
			body: {
				type: "do_action",
				content: {
					action: 'toggleFreeDialog',
					param: []
				}
			}
		};
		this.props.baseStore.socketData.doEmit("teach_app_to_server", data);

		if (this.props.showStore.SetCurrentWordItem != null) {
			this.props.showStore.SetCurrentWordItem(this.props.showStore.currentWordItem);
		}

		setTimeout(() => {
			if (this.props.showStore.currentWordImgList == null || this.props.showStore.currentWordImgList.length == 0) {
				message.warning('未选中左侧字或选中为空')
				return;
			}
			this.setState({ show_free_dialog: !this.state.show_free_dialog })
		}, 200);




	}


	//画布拖动
	moveCanvasHandler = (type) => {

		var data = {
			header: this.props.baseStore.socketData.header,
			body: {
				type: "do_action",
				content: {
					action: 'moveCanvasHandler',
					param: [type]
				}
			}
		};
		this.props.baseStore.socketData.doEmit("teach_app_to_server", data);

		//居中
		if (type == 0) {
			this.setCanvaWrapPosition();
			return;
		}

		var changTop = 0;
		var changLeft = 0;
		if (type == 1) {
			changTop = -30;
		} else if (type == 2) {
			changLeft = 30;
		} else if (type == 3) {
			changTop = 30;
		} else if (type == 4) {
			changLeft = -30;
		}

		var top = parseFloat($(".canvas-container").css('top').replace('px'))
		var left = parseFloat($(".canvas-container").css('left').replace('px'))

		$(".canvas-container").css({
			left: left + changLeft,
			top: top + changTop,
			transform: "translate(-50%,-50%)"
		});
	}

	hideDialog = () => {

		var data = {
			header: this.props.baseStore.socketData.header,
			body: {
				type: "do_action",
				content: {
					action: 'hideDialog',
					param: []
				}
			}
		};
		this.props.baseStore.socketData.doEmit("teach_app_to_server", data);

		this.setState({
			show_free_dialog: false
		})
	}

	changeFreeBg = (item) => {

		var data = {
			header: this.props.baseStore.socketData.header,
			body: {
				type: "do_action",
				content: {
					action: 'changeFreeBg',
					param: [item]
				}
			}
		};
		this.props.baseStore.socketData.doEmit("teach_app_to_server", data);

		this.setState({
			freeBgUrl: item.ImgUrl
		})


	}


	selectFreeActiveItem = (img_item) => {

		var data = {
			header: this.props.baseStore.socketData.header,
			body: {
				type: "do_action",
				content: {
					action: 'selectFreeActiveItem',
					param: [img_item]
				}
			}
		};
		this.props.baseStore.socketData.doEmit("teach_app_to_server", data);

		this.setState({
			freeActiveItem: img_item
		})
	}

	setFreeActiveItem = (index, e) => {

		var data = {
			header: this.props.baseStore.socketData.header,
			body: {
				type: "do_action",
				content: {
					action: 'setFreeActiveItem',
					param: [index, e]
				}
			}
		};
		this.props.baseStore.socketData.doEmit("teach_app_to_server", data);

		// this.setState({
		// 	show_free_dialog: false
		// })

		if (this.state.freeActiveItem) {
			console.log(e, "==========e===========");

			e.target.src = this.props.baseStore.GetFinalImageUrl(this.state.freeActiveItem.ImageURL);
		}

		console.log(index, "=========index=========");

		var map = this.state.freeActiveItemMap;
		map[index + 1] = this.state.freeActiveItem;

		this.setState({
			// freeActiveItem: null,
			freeActiveItemMap: map
		})

		console.log(this.state.freeActiveItemMap, "=========freeActiveItemMap============");
	}

	confirmFree = () => {


		var data = {
			header: this.props.baseStore.socketData.header,
			body: {
				type: "do_action",
				content: {
					action: 'confirmFree',
					param: []
				}
			}
		};
		this.props.baseStore.socketData.doEmit("teach_app_to_server", data);

		var imgArr = [];

		for (var i = 1; i <= 8; i++) {
			if (this.state.freeActiveItemMap[i]) {
				imgArr.push(this.state.freeActiveItemMap[i])
			} else {
				imgArr.push(null)
			}
		}


		this.props.showStore.currentWordImgList = imgArr;

		this.state.freeActiveItemMap = {};

		this.setState({
			show_free_dialog: false
		})
		this.renderImgArr(imgArr, this._canvas);
		this.canvasChangeBgDirect(this.state.freeBgUrl);

		this.setState({
			freeActiveItem: null
		})

	};

	toggleNight = () => {

		this.setState({
			night: !this.state.night
		});


		var data = {
			header: this.props.baseStore.socketData.header,
			body: {
				type: "do_action",
				content: {
					action: 'toggleNight',
					param: []
				}
			}
		};
		this.props.baseStore.socketData.doEmit("teach_app_to_server", data);


	}

	zoomToForPhysicalButton = (num) => {

		var arr = [50, 75, 90, 100, 120];
		var curIndex = arr.indexOf(this.state.each_w_mm);

		if (num > 0) {
			curIndex = curIndex + 1;
			curIndex = curIndex > 5 ? 5 : curIndex;
			//放大
		} else {
			curIndex = curIndex - 1;
			curIndex = curIndex < 0 ? 0 : curIndex;
		}


		this.zoomToMM(arr[curIndex])
	}


	zoomToMM = (mm) => {


		var data = {
			header: this.props.baseStore.socketData.header,
			body: {
				type: "do_action",
				content: {
					action: 'zoomToMM',
					param: [mm]
				}
			}
		};
		this.props.baseStore.socketData.doEmit("teach_app_to_server", data);

		// 计算出如果调成安世高10cm的绽放比例
		var my_px = WinHelper.mmToPx(mm);
		my_px = Math.round(my_px);
		console.log(my_px, "=======my_px=======");
		this.setState({
			each_w: my_px,
			each_w_mm: mm
		})


		var needZoom = my_px / 300;
		this.canvasZoomDirect(needZoom);

	}

	lock = () => {

		var data = {
			header: this.props.baseStore.socketData.header,
			body: {
				type: "do_action",
				content: {
					action: 'lock',
					param: []
				}
			}
		};
		this.props.baseStore.socketData.doEmit("teach_app_to_server", data);

		this.setState({
			side_show: !this.state.side_show,
			maskLock: true
		})



	}

	render() {

		var ShowPage_Main = "ShowPage_Main ";

		if (this.state.night) {
			ShowPage_Main += "night";
		}


		let sideClassName = "ShowPage_Side ";

		if (this.state.side_show) {
			sideClassName += " toggle_show";
		}

		if (!this.state.side_show) {
			sideClassName += " toggle_hide";
		}


		var sideMainCls = "ShowPage_Side_Main"
		if (this.props.showStore.rightList.length > 5) {
			sideMainCls += " has_scroll_bar";
		}


		var freeBgUrl = this.state.freeBgUrl;
		const styles = {
			freeBg: {
				backgroundImage: `url(${freeBgUrl})`
			}
		}

		return (

			<div className="ShowPage page_container  fadeInDown fast" >


				<div className={sideClassName} ref="_side" >


					<div className={sideMainCls} ref="_tool" >
						{
							this.props.showStore.rightList.map((item, index) => {

								var single_container_cls = "single_container ";
								console.log(index, "index");
								if (this.state.activeRightListIndex == index) {
									single_container_cls = single_container_cls + ' active';
								}

								return (
									<div className={single_container_cls} key={index} onClick={() => this.singleContainClick(item, index)}>
										<div className="single_img_container">
											<img src={this.props.baseStore.GetFinalImageUrl(item.ImageURL)} alt="" />
										</div>
										<div className="single_bottom_container">


											<div key={index + '_01'} onClick={(e) => this.showVideo(e, item.VideoURL)}>
												{
													<img src={ImageLoader.video_white} alt="" />
												}

											</div>

											<div key={index + '_02'} onClick={(e) => this.showVideo(e, item.AnimationURL)}>
												<img src={ImageLoader.video_white_flash} alt="" />
											</div>



										</div>

									</div>
								)
							})
						}


					</div>


					<div className="ShowPage_Tool" ref="_tool" >
						<div className="canvas_toggle_bg" onClick={this.toggleNight}>
							白夜切换
						</div>
						<div className="" onClick={this.toggleFreeDialog}>
							自由临摹
						</div>
						<div className="canvas_can_drag">
							整体拖动
						</div>
						{/* <div className="canvas_zoom_out" onClick={() => this.canvasZoomDirect(1)}>
							初始比例
						</div>
						<div className="canvas_zoom_in" onClick={this.canvasZoomIn}>
							比例放大
						</div>
						<div className="canvas_zoom_out" onClick={this.canvasZoomOut}>
							比例缩小
						</div> */}
						<div className="canvas_clear" onClick={this.canvasClear}>
							清除画布
						</div>
						<div className="canvas_toggle_bg" onClick={this.canvasChangeBg}>
							切换背景
						</div>
						<div className="canvas_can_drag" onClick={() => this.moveCanvasHandler(0)}>
							居中移动
						</div>
						<div className="canvas_can_drag" onClick={() => this.moveCanvasHandler(1)}>
							向上移动
						</div>
						<div className="canvas_can_drag" onClick={() => this.moveCanvasHandler(3)}>
							向下移动
						</div>
						<div className="canvas_can_drag" onClick={() => this.moveCanvasHandler(2)}>
							向左移动
						</div>
						<div className="canvas_can_drag" onClick={() => this.moveCanvasHandler(4)}>
							向右移动
						</div>


						<div className={this.state.each_w_mm == 120 ? "canvas_toggle_bg active" : "canvas_toggle_bg "} onClick={() => { this.zoomToMM(120) }}>
							12cm
								</div>
						<div className={this.state.each_w_mm == 100 ? "canvas_toggle_bg active" : "canvas_toggle_bg "} onClick={() => { this.zoomToMM(100) }}>
							10cm
								</div>
						<div className={this.state.each_w_mm == 90 ? "canvas_toggle_bg active" : "canvas_toggle_bg "} onClick={() => { this.zoomToMM(90) }}>
							9cm
								</div>
						<div className={this.state.each_w_mm == 75 ? "canvas_toggle_bg active" : "canvas_toggle_bg"} onClick={() => { this.zoomToMM(75) }}>
							7.5cm
								</div>
						<div className={this.state.each_w_mm == 50 ? "canvas_toggle_bg active" : "canvas_toggle_bg"} onClick={() => { this.zoomToMM(50) }}>
							5cm
								</div>
						<div className="canvas_can_drag" onClick={() => this.lock()}>
							锁屏
						</div>

					</div>

					<div onClick={this.handleToggleSideClick} className="ShowPage_Tool_Min fixed" ref="_tool_min" >
						<Icon type={this.state.side_show ? "arrow-left" : "arrow-right"} />
					</div>


				</div>



				<div className={ShowPage_Main} >




					<canvas id="canvas" ></canvas>

					{/* <input type="text" /> */}


				</div>
				{
					// this.state.show_img && (<div className="wrap_for_show_create_img" onClick={this.hideShowImg} >
					// 	<img download className="img_for_show_create_img" src={this.state.show_img_url} alt="" />
					// 	<Button />
					// </div>)


					this.state.show_video && (<Modal
						title={"播放"}
						centered={true}
						width={1300}
						height={840}
						cancelText="关闭"
						okText="下载(注：因为白色字,打开可能看不出效果哦)"
						visible={this.state.show_video}
						footer={null}
						onCancel={this.closeVideo}
						wrapClassName="show_video_wrap"
						maskClosable={false}
						destroyOnClose={true}
					>

						<div>
							{

								this.state.video_type == 0 ?
									<iframe src={"./baoli.html?autoplay=1&key=" + this.state.show_video_url} width="1280" height="765" /> : null
							}
							{
								this.state.video_type == 1 ? <video controls controlslist="nodownload" loop="loop" width="1000" height="560" autoPlay className="my_video" src={this.state.show_video_url} controls="controls">
								</video> : null
							}

							{/* <div className="video_mask"></div> */}

						</div>






					</Modal>)
				}

				{
					this.state.show_free_dialog ? (

						<div className="show_free_dialog ">
							<div className="free_side">

								{
									this.props.showStore.currentWordImgList && this.props.showStore.currentWordImgList.map((item, index) => {
										return <div key={index} className="free_side_each" onClick={() => { this.selectFreeActiveItem(item) }}>
											<img src={item ? this.props.baseStore.GetFinalImageUrl(item.ImageURL) : ''} alt="" />
										</div>
									})
								}

							</div>
							<div className="free_right">
								{/* <div className="free_right_01">
									<img src={ImageLoader.free_title} alt="" />
								</div> */}
								<div className="free_right_02">
									{
										this.state.bgImgList.map((item, index) => {
											return (

												<div key={index} onClick={() => { this.changeFreeBg(item) }}>
													<img src={ImageLoader[item.Icon]} alt="" />
													{item.Name}
												</div>
											)
										})
									}
								</div>
								<div className="free_right_03" style={styles.freeBg} >
									{
										[1, 2, 3, 4, 5, 6, 7, 8].map((item, index) => {
											return <img src="" key={index} className="free_each" onClick={(e) => { this.setFreeActiveItem(index, e) }} />
										})
									}

								</div>
								<div className="free_right_04">
									说明：从左边点击临摹字样后,再到右侧相应的字格上单击,以庙宇临摹样式
								</div>
								<div className="free_right_05">
									<Button size="large" className="mr_5" onClick={this.toggleFreeDialog}>取  消</Button>
									<Button size="large" type="primary" onClick={this.confirmFree}>确  定</Button>
								</div>
							</div>
						</div>
					) : null
				}


				{
					this.state.show_free_dialog ? (
						<div className="ant-modal-mask" onClick={this.hideDialog}>

						</div>
					) : null
				}



				{
					this.state.maskLock && <div className="lockMask">
						<div className="lock_text">锁屏中</div>
					</div>
				}



			</div >
		);


	}
}

export default ShowPage;